<template>
  <el-container class="home-container">
    <!-- 头部 -->
    <el-header>
      <div>
        <img src="../../assets/toulogo.jpg" alt="" class="toux" />
        <span>用户模块后台管理系统</span>
      </div>
      <div>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          text-color="aliceblue"
          background-color="#373d41"
          active-text-color="aliceblue"
        >
          <el-submenu index="2" >
            <template slot="title" >teacher</template>
            <el-menu-item index="2-1"  @click="index_personal = true">个人中心</el-menu-item>
            <el-menu-item index="2-2"  @click="index_password  = true">修改密码</el-menu-item>
          </el-submenu>
        </el-menu>
        <el-button type="info" @click="logout">退出</el-button>
      </div>
      <!-- 添加按钮对话框 -->
    <el-dialog
      title="修改密码"
      :visible.sync="index_password"
      width="30%"
      :before-close="handleClose"
    >
      <div>
        <div class="dialog">
          <el-form label-width="80px">
            <el-form-item label="新密码">
              <el-input v-model="username1"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="index_password = false">取 消</el-button>
          <el-button type="primary" @click="index_password = false">确 定</el-button>
        </span>
      </div>
    </el-dialog>
      <!-- 个人信息对话框 -->
    <el-dialog
      title="个人信息"
      :visible.sync="index_personal"
      width="35%"
      :before-close="handleClose"
    >
     <div>
        <div class="dialog">
          <el-form label-width="150px" label-position="right">
            <el-form-item label="姓名">
              <el-input v-model="userForm.username1"></el-input>
            </el-form-item>
            <el-form-item label="工号">
              <el-input v-model="userForm.username2" disabled></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="userForm.username3" disabled></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input v-model="userForm.username4"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
              <el-input v-model="userForm.username5"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-input v-model="userForm.username7"></el-input>
            </el-form-item>
            <el-form-item label="所属学院">
              <el-input v-model="userForm.username6" disabled></el-input>
            </el-form-item>
            <el-form-item label="所属教研室">
              <el-input v-model="userForm.username8" disabled></el-input>
            </el-form-item>
            <el-form-item label="注册时间">
              <el-input v-model="userForm.username8" disabled></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="index_personal = false">取 消</el-button>
          <el-button type="primary" @click="index_personal = false"
            >确 定</el-button
          >
        </span>
      </div>
    </el-dialog>
    </el-header>
    <!-- 主体 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <div class="toggle-button" @click="toggleCollapse">|||</div>
        <el-menu
          background-color="antiquewhite"
          text-color="#373d41"
          active-text-color="blue"
          :collapse="isCollapse"
          :collapse-transition="false"
          router
        >
          <!-- 一级菜单 -->
          <el-submenu index="1" >
            <!-- 一级菜单模板 -->
            <template slot="title">
              <!-- 一级菜单图标 -->
              <i class="el-icon-user-solid"></i>
              <!-- 一级菜单文本 -->
              <span>用户管理</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item index="1-4-1" @click="index_role" disabled>
              <template slot="title">
                <!-- 二级菜单图标 -->
                <i class="el-icon-menu"></i>
                <!-- 二级菜单文本 -->
                <span>角色管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="1-4-2" @click="index_admin"  disabled>
              <template slot="title">
                <!-- 二级菜单图标 -->
                <i class="el-icon-menu"></i>
                <!-- 二级菜单文本 -->
                <span>管理员管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="1-4-3" @click="index_tercher"  disabled>
              <template slot="title">
                <!-- 二级菜单图标 -->
                <i class="el-icon-menu"></i>
                <!-- 二级菜单文本 -->
                <span>教师管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="1-4-4" @click="index_instructor"  disabled>
              <template slot="title">
                <!-- 二级菜单图标 -->
                <i class="el-icon-menu"></i>
                <!-- 二级菜单文本 -->
                <span>辅导员管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="1-4-5" @click="Course_Information">
              <template slot="title">
                <!-- 二级菜单图标 -->
                <i class="el-icon-menu"></i>
                <!-- 二级菜单文本 -->
                <span>学生管理</span>
              </template>
            </el-menu-item>
          </el-submenu>
          <el-menu-item index="2" @click="index_Introduction">
            <i class="el-icon-document"></i>
            <span slot="title">学院简介</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <!-- 右侧主体 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>

  </el-container>
  
</template>

<script>
export default {
  data() {
    return {
      // 是否折叠
      isCollapse: false,
      index_password:false,
      activeIndex: '1',
       activeIndex2: '1',
       username1:"",
       index_personal:false,
        userForm: {
        username1: "",
        username2: "",
        username3: "",
        username4: "",
        username5: "",
        username6: "",
        username7: "",
        username8: "",
        username9: "",
        select1: "",
      },
       
    };
  },
  methods: {
    logout() {
      window.sessionStorage.clear();
      this.$router.push("/login");
    },
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    Course_Information() {
      this.$router.push("/teacher_user");
    },
    index_role() {
      this.$router.push("/role");
    },
    index_admin() {
      this.$router.push("/admin");
    },
    index_Introduction(){
        this.$router.push("/teacher_Introduction");
    },
    index_tercher() {
      this.$router.push("/teacher");
    },
    index_instructor() {
      this.$router.push("/instructor");
    },
    handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>

<style lang="less" scoped>
.home-container {
  height: 100%;
}
.el-header {
  background-color: #373d41;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: ivory;
  font-size: 20px;
  > div {
    display: flex;
    align-items: center;
    span {
      margin-left: 5px;
    }
  }
}
.toux {
  width: 55px;
  height: 55px;
  padding-left: 10px;
  border-radius: 50%;
  padding: 20px;
}
.el-aside {
  background-color: antiquewhite;
  .el-menu {
    border-right: none;
  }
}
.el-main {
  background-color: #eaedf1;
}
.toggle-button {
  background-color: cornsilk;
  font-size: 10px;
  line-height: 24px;
  color: #373d41;
  text-align: center;
  letter-spacing: 0.4em;
  cursor: pointer;
}
.span_header {
  margin-right: 5px;
}
.el-icon-caret-bottom {
  margin-right: 20px;
}
.dialog-footer {
  margin-top: 50px;
  display: flex;
  justify-content: center;
}
.dialog {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 30px;
}
</style>
